<template>
    <div class="tab-bar">
        <!-- 如果仅用slot无法给为每个tab添加不同的icon，可以用v-for遍历$slots.default() -->
        <template
            v-for="(child, index) in $slots.default ? $slots.default() : []"
            :key="index"
        >
            <component
                :is="child.type"
                v-bind="child.props"
                :activeIcon="modelValue"
                @update:modelValue="handleUpdateModelValue"
            />
        </template>
    </div>
    <div class="tabItemShow"></div>
</template>

<script setup>
import { defineProps, defineEmits, inject } from "vue";
const msg = inject('message','这是默认值')
const props = defineProps({
    modelValue: {
        type: String,
        default: "icon-home",
    },
});

const emit = defineEmits(["update:modelValue"]);

const handleUpdateModelValue = (updateValue) => {
    emit("update:modelValue", updateValue);
};

console.log(msg)
</script>
<style scoped>
.tab-bar {
    max-width: 300px;
    padding: 10px;
    background: rgb(255, 255, 255);
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 0 10px gainsboro;
}
.tabItemShow {
    width:300px;
    height: 600px;
    padding: 10px;
    margin-top: 5px;
    background: rgb(255, 255, 255);
}
</style>
